<template>
    <div>
        <div>
            <el-table
                    :data="classificationList"
                    border
                    @row-click="columnListener"
                    :row-key="classificationList.cid"
                    style="width: 700px"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="100" align="center">
                </el-table-column>
                <el-table-column prop="lid" label="lid" width="100px" align="center">
                </el-table-column>
                <el-table-column prop="name" label="名称" width="200px" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name"/>
                    </template>
                </el-table-column>
                <div>
                </div>
                <el-table-column label="操作" width="300px" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="btn_update(scope.row)">保存</el-button>
                        <el-button type="text" size="small" @click="btn_change(3)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="margin-top: 2%">
            <el-row>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">

                    <div style="flex: 1">
                        <h3>试着批量操作?</h3>
                        <el-button type="text" size="small" style="margin-left: 3%" @click=btn_batch(1)>删除</el-button>
                        <p style="font-size: 10px">ps: 删除标签,虽然不会将文章丢到废纸篓,但是会将相关的文章去掉改标签</p>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">

                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>
    let that;
    export default {
        name: "List",
        data() {
            return {
                classificationList: [],
                checkedArticles: [],//选中的文章
                flag: 0,//这个用于判断来干嘛


                fatherClassificationList: [],

                flag1: -1//用于删除提示
            }
        },

        mounted() {
            that = this;
            that.$Axios(that.$store).post(that.LABEL_API + "/list")
                .then(function (result) {
                    let data = result.data.data;
                    that.classificationList = data;
                });
        },

        methods: {
            btn_cancel() {
                that.displayFlag = false;
            },
            btn_batch(e) {
                let json = [];
                that.checkedArticles.forEach(o => {
                    json.push(o.lid);
                });
                if (e === 1) {
                    //    批量删除
                    if (that.flag1 === -1) {
                        that.$notify({
                            title: '警告',
                            message: '当前操作不可逆,确认后请再次点击删除',
                            type: 'warning'
                        });
                        that.flag1 = -2;
                    } else if (that.flag1 === -2) {
                        that.$Axios(that.$store).post(that.LABEL_API + "/delete", json)
                            .then(function (result) {
                                that.$router.go(0);
                            });
                        that.flag1 = -1;

                    }

                }
            },
            //编辑
            btn_update(row) {
                that.$Axios(that.$store).post(that.LABEL_API + "/update", row)
                    .then(function (result) {
                        that.$message({
                            message: result.data.msg,
                            type: 'success'
                        });
                    });
            },
            //这里面对列进行了所有的操作
            columnListener(row, event, column) {
                if (that.flag === 0) {
                    console.log("正常")
                } else if (that.flag === 3) {
                    if (that.flag1 !== row.lid) {
                        that.$notify({
                            title: '警告',
                            message: '当前操作不可逆,虽然不会将相关的文章丢进废纸篓,但是会将相关的文章,去掉该标签,确认后请再次点击删除',
                            type: 'warning'
                        });
                        that.flag1 = row.lid;
                    } else {
                        that.flag = -1;
                        let json = [
                            row.lid
                        ];
                        that.$Axios(that.$store).post(that.LABEL_API + "/delete", json)
                            .then(function (result) {
                                that.$router.go(0);
                            });
                    }
                }
            },

            btn_change(e) {
                that.flag = e;
            },
            handleSelectionChange(val) {
                that.checkedArticles = val;
            },

            handleClick(row) {
                console.log(row);
            }
        },
    }
</script>

<style scoped src="../../../static/md/markdown.css">

</style>